<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn>批量删除</cl-multi-delete-btn>
			<cl-export-btn type="success" :columns="table.columns" />
			<!-- <cl-query
			:list="[
				{
					label: '天猫',
					value: 0
				},
				{
					label: '淘宝',
					value: 1
				},
				{
					label: '京东',
					value: 2
				}
			]"
		></cl-query> -->

			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="请输入教师姓名，支持模糊查询" />
		</el-row>
		<el-row>
			<cl-filter label="状态">
				<el-select
					size="mini"
					v-model="form.is_work"
					@change="searchSubmit"
					style="width: 20px"
				>
					<el-option :key="all" :value="null" label="全部"></el-option>
					<el-option :key="all" :value="true" label="在职"></el-option>
					<el-option :key="all" :value="false" label="离职"></el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="类型">
				<el-select
					size="mini"
					v-model="form.type"
					@change="searchSubmit"
					style="width: 20px"
				>
					<el-option :key="all" :value="null" label="全部"></el-option>
					<el-option :key="all" value="0" label="全职"></el-option>
					<el-option :key="all" value="1" label="兼职"></el-option>
				</el-select>
			</cl-filter>
			<cl-flex1 />
			<el-button size="mini" type="success" @click="resetSerach">重置</el-button>
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" v-bind="table">
				<template #column-user_id="{ scope }">
					<el-tag
						size="mini"
						v-for="item in user_list"
						:key="item.value"
						v-show="parseInt(scope.row.user_id) === parseInt(item.value) ? true : false"
						>{{ item.label }}</el-tag
					>
					<!-- {{ scope.row.user_id }}，你好 -->
					<!-- {{user_list}} -->
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, inject, reactive, onMounted, ref } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useRefs } from "/@/core";
import axios from "axios";
import { baseUrl, URL } from "/@/config/env";

export default defineComponent({
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		const user_list = ref([]);

		const getUser = async function () {
			const res = await service.base.system.user.list();
			res.forEach((item, index) => {
				user_list.value.push({
					value: item.id,
					label: item.name + " " + item.username
				});
			});
		};

		onMounted(async () => {
			await getUser();
		});

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					prop: "name",
					label: "教师姓名",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入教师姓名"
						}
					},
					rules: {
						required: true,
						message: "教师姓名不能为空"
					}
				},
				{
					prop: "age",
					label: "年龄",
					span: 12,
					component: {
						name: "el-input-number",
						props: {
							placeholder: "请输入年龄"
						}
					},
					rules: {
						required: true,
						message: "年龄不能为空"
					}
				},
				{
					prop: "gender",
					label: "性别",
					span: 24,
					value: 1,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "男",
								value: 1
							},
							{
								label: "女",
								value: 0
							},
							{
								label: "未知",
								value: 2,
								type:'info'
							}
						]
					},
					rules: {
						required: true,
						message: "性别不能为空"
					}
				},
				{
					prop: "professional",
					label: "专业",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入专业"
						}
					},
					rules: {
						required: true,
						message: "专业不能为空"
					}
				},
				{
					prop: "school",
					label: "毕业学校",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入毕业学校"
						}
					},
					rules: {
						required: true,
						message: "毕业学校不能为空"
					}
				},
				{
					prop: "work_goal",
					label: "工作目标",
					span: 24,
					component: {
						name: "el-input"
					},
					rules: {
						required: false,
						message: "工作目标不能为空"
					}
				},
				{
					prop: "type",
					label: "类型",
					span: 12,
					value: 0,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "全职",
								value: 0
							},
							{
								label: "兼职",
								value: 1
							}
						]
					},
					rules: {
						required: true,
						message: "类型不能为空"
					}
				},
				{
					prop: "is_work",
					label: "是否在职",
					span: 12,
					value: true,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "在职",
								value: true
							},
							{
								label: "离职",
								value: false
							}
						]
					},
					rules: {
						required: true,
						message: "是否在职不能为空"
					}
				},
				{
					prop: "user_id",
					label: "使用账号",
					span: 24,
					component: {
						name: "el-select",
						options: user_list.value,
						props: {
							placeholder: "请选择使用账号"
						}
					},
					rules: {
						required: false,
						message: "关联账号不能为空"
					}
				},
				{
					prop: "note",
					label: "备注",
					span: 24,
					component: {
						name: "el-input",
						type: "textarea",
						props: {
							placeholder: "请输入备注"
						}
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					type: "index",
					label: "#",
					width: 60
				},
				{
					prop: "name",
					label: "教师姓名",
					width: 100,
					sortable: true
				},
				{
					prop: "age",
					label: "年龄",
					width: 90,
					sortable: true
				},
				{
					prop: "gender",
					label: "性别",
					width: 90,
					dict: [
						{
							label: "男",
							value: 1,
							type: "success"
						},
						{
							label: "女",
							value: 0,
							type: "danger"
						},
						{
							label: "未知",
							value: 2,
							type:'info'
						}
					]
				},
				{
					prop: "professional",
					label: "专业",
					sortable: true
				},
				{
					prop: "school",
					label: "毕业学校",
					width: 120
				},
				{
					prop: "work_goal",
					label: "工作目标",
					width: 120
				},
				{
					prop: "user_id",
					label: "使用账号",
					width: 160
				},
				{
					prop: "type",
					label: "类型",
					width: 90,
					sortable: true,
					dict: [
						{
							label: "全职",
							value: 0,
							type: "success"
						},
						{
							label: "兼职",
							value: 1,
							type: "danger"
						}
					]
				},
				{
					prop: "is_work",
					label: "是否在职",
					width: 100,
					sortable: true,
					dict: [
						{
							label: "在职",
							value: true,
							type: "success"
						},
						{
							label: "离职",
							value: false,
							type: "danger"
						}
					]
				},
				{
					label: "操作",
					type: "op"
				}
			]
		});

		// 自定义筛选
		const form = ref({
			type: null,
			is_work: null
		});

		// 筛选按钮提交
		const searchSubmit = function (e) {
			refs.value.crud.refresh({ ...form.value });
		};

		// 重置筛选条件

		const resetSerach = function () {
			form.value = {
				type: null,
				is_work: null
			};
			refs.value.crud.refresh({ ...form.value });
		};

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.teacherService).done();
			app.refresh();
		}

		return {
			refs,
			setRefs,
			upsert,
			table,
			onLoad,
			user_list,
			// 筛选
			form,
			resetSerach,
			searchSubmit
		};
	}
});
</script>
